package com.lizhi.dingdong.apk.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.lizhi.dingdong.apk.data.NotificationItem
import kotlin.let


// 1. 模拟图标：使用 Box 替代第三方图片库
@Composable
fun SourceIconPlaceholder(color: Color) {
    Box(
        modifier = Modifier
            .size(30.dp)
            .clip(CircleShape)
            .background(color),
        contentAlignment = Alignment.Center
    ) {
        // 实际应用中，这里可以是 App Logo 或首字母
        Text(
            text = "S",
            color = Color.White,
            fontSize = 16.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

// 2. 单个列表项的 UI
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NotificationListItem(item: NotificationItem) {

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp, vertical = 4.dp),
    ) {
        // 外层改为 Column，实现垂直排列
        Column(
            modifier = Modifier.padding(12.dp)
        ) {
            // --- 第一行：图标、来源名称、时间戳（水平布局）---
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween // 来源和时间戳左右对齐
            ) {
                // 左侧：图标和来源名称
                Row(verticalAlignment = Alignment.CenterVertically) {
                    SourceIconPlaceholder(Color(item.iconColor))

                    Spacer(modifier = Modifier.width(12.dp))

                    Text(
                        text = item.sourceName,
                        fontWeight = FontWeight.SemiBold,
                        fontSize = 18.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }

                // 右侧：时间戳
                Text(
                    text = item.timestamp,
                    fontSize = 12.sp,
                    color = Color.Gray
                )
            }

            // 垂直间隔
            Spacer(modifier = Modifier.height(8.dp))

            // 详情内容（可选）
            item.content?.let { detail ->

                // 插入浅色 Divider
                HorizontalDivider(
                    modifier = Modifier
                        .padding(vertical = 6.dp) // 增加垂直空间
                        .fillMaxWidth(),
                    thickness = 0.5.dp,
                    color = Color.LightGray
                )

                Text(
                    text = detail,
                    fontSize = 14.sp,
                    color = Color.DarkGray,
                    maxLines = 2,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
    }

}

// 预览 (用于在 Android Studio 中即时查看效果)
@Preview(showBackground = true)
@Composable
fun PreviewNotificationItem() {
    val sampleItem = NotificationItem(
        sourceName = "中国电信",
        timestamp = "10/18",
        title = "【余额不足提醒】尊敬的客户...",
        content = "截至2025年10月18日01时59分，您的可用余额为14.90...",
        iconColor = Color(0xFF2196F3).toArgb() // 蓝色
    )
    MaterialTheme { // 必须包装在主题中才能预览
        NotificationListItem(item = sampleItem)
    }
}
